Apollo VSCode Extension

とは？

Apollo 製の VSCode 拡張。Apollo Engine と組み合わせて利用することで真価を発揮する。

メリット

Auto complete

実データに基づいたクエリのパフォーマンス予測

シンタックスハイライト

バリデーション

準備

VSCode が古いと古いプラグインが入ってしまい、古いバージョンだとうまく動作しないので、VSCode は 1.30 以降にしておいた方が良さそう。

プロジェクトルート直下に設定ファイルを用意する。

code:.env

ENGINE_API_KEY=service:app-name:xxxxxxxxxxxxxxxx

code:apollo.config.js

module.exports = {

client: {

service: {

name: "sample-graphql-app",

}

};

設定ファイルの画面で、右下にある ApolloGraphQL を押下する。

https://gyazo.com/2fb3c6288ff91e8084284498ac675944

正常に Engine にアクセスできると以下のような出力が出る。

https://gyazo.com/e38d8951e3adfa5c45f89cd62064961b

利用方法

include で設定したファイル内でクエリを記述すると、

Auto complete

実行時間予測

バリデーション

を行ってくれる。

https://gyazo.com/8c1b12df71b840edac16e67672f96be5

トラブルシューティング

VSCode のバージョンが古くないか確認

バージョンが古いと問題が生じるらしい

設定ファイルの内容が間違っているとうまく動作しないので注意